// H5端主布局 - 底部Tab导航（红色主题）
import React from 'react'
import { App, Page } from 'konsta/react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { Home, Newspaper, Wallet, Settings } from 'lucide-react'

const MainLayout = () => {
  const location = useLocation()
  const navigate = useNavigate()

  const tabs = [
    { path: '/home', label: '首页', icon: Home },
    { path: '/news', label: '资讯', icon: Newspaper },
    { path: '/wallet', label: '钱包', icon: Wallet },
    { path: '/profile', label: '设置', icon: Settings },
  ]

  const handleTabClick = (path: string) => {
    navigate(path)
  }

  return (
    <App theme="ios">
      <Page>
        {/* 主内容区域 - 由子路由填充 */}
        <div className="flex-1 overflow-y-auto pb-20">
          <Outlet />
        </div>

        {/* 自定义底部Tab栏 - 红色主题（毛玻璃效果） */}
        <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 safe-bottom shadow-lg">
          <div className="flex items-center justify-around px-2 py-2">
            {tabs.map((tab) => {
              const Icon = tab.icon
              const isActive = location.pathname === tab.path
              return (
                <button
                  key={tab.path}
                  onClick={() => handleTabClick(tab.path)}
                  className="flex flex-col items-center justify-center flex-1 py-2 px-1"
                >
                  <div className={`
                    w-13 h-13 rounded-2xl flex items-center justify-center transition-all duration-200 mb-1
                    ${isActive 
                      ? 'bg-gradient-to-br from-red-500 to-orange-500 shadow-lg shadow-red-500/30 scale-105' 
                      : 'bg-gray-100'
                    }
                  `}>
                    <Icon 
                      size={23}
                      className={isActive ? 'text-white' : 'text-gray-600'}
                      strokeWidth={isActive ? 2.5 : 2}
                    />
                  </div>
                  <span className={`
                    text-xs font-medium transition-colors duration-200
                    ${isActive ? 'text-red-600' : 'text-gray-600'}
                  `}>
                    {tab.label}
                  </span>
                </button>
              )
            })}
          </div>
        </div>
      </Page>
    </App>
  )
}

export default MainLayout

